<template>
    <view class="searchBar">
        <view class="searchBar-actions searchBar-actions-scan" v-if="scantions && scantions.length > 0">
            <view class="btn-action-item" :key="item.id" v-for="item in scantions" @click.stop="clickAction(item)">
                <image v-if="item.isImgIcon" class="searchBar-img-icon" :src="item.type"></image>
                <iconsfont v-else :customIcons="item.type" :size="item.type == 'icon-saoyisao' ? 38 : 36"></iconsfont>
            </view>
        </view>
        <view class="searchBar-main">
            <uni-icons type="search" size="30"></uni-icons>
            <slot name="assort"></slot>
            <input class="input input-search" :placeholder="placeholderText" confirm-type="search" @confirm="searchFn"
                v-model="value" />
            <text class="btn-search" v-if="showSearchBtn" @click="searchFn">搜索</text>
        </view>
        <view class="searchBar-actions" v-if="actions && actions.length > 0">
            <view class="btn-action-item" :key="item.id" v-for="item in actions" @click.stop="clickAction(item)">
                <image v-if="item.isImgIcon" class="searchBar-img-icon" :src="item.type"></image>
                <iconsfont v-else :customIcons="item.type" :size="item.type == 'icon-saoyisao' ? 52 : 36"></iconsfont>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        placeholderText: {
            type: String,
            default: "请输入搜索内容",
        },
        showSearchBtn: {
            type: Boolean,
            default: true,
        },
        actions: {
            type: Array,
            default: () => [],
        },
        scantions: {
            type: Array,
            default: () => [],
        },
        searchValue: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            value: "",
        }
    },
    mounted() {
        this.value = this.searchValue
    },
    methods: {
        searchFn() {
            //搜索
            let key = this.value
            if (key && key.length) {
                key = key.trim()
            } else {
                key = ""
            }
            this.$emit("searchFn", key)
        },
        clickAction(item) {
            //功能点击
            this.$emit("actionFn", item)
        },
    },
}
</script>

<style lang="scss">
.searchBar {
    display: flex;
    flex-direction: row;
    padding: 12rpx $app-item-padding;
    align-items: center;
    background: $color-white;
    height: 96rpx;

    .searchBar-main {
        display: flex;
        flex-direction: row;
        flex: 1;
        background: $app-color-input-bg;
        height: 72rpx;
        border-radius: 36rpx;
        align-items: center;
        padding: 0 20rpx;

        .input-search {
            display: flex;
            flex: 1;

            padding: 10rpx;
            font-size: 24rpx;
        }

        .btn-search {
            display: flex;
            height: 72rpx;
            width: 100rpx;
            align-items: center;
            justify-content: center;
        }
    }

    .searchBar-actions {
        display: flex;
        flex-direction: row;
        margin-right: -20rpx;

        .btn-action-item {
            width: 88rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .searchBar-img-icon {
                width: 48rpx;
                height: 48rpx;
            }
        }
    }

    .searchBar-actions-scan {
        margin-right: 0rpx;
        margin-left: -20rpx;
    }
}
</style>
